<template>
	<div class="not-found">
		<div class="box">
			<div class="face"></div>
			<div class="info">
				<span>4</span>
				<span>0</span>
				<span>4</span>
			</div>
			<router-link class="go-home" to="/">回到首页</router-link>
		</div>
	</div>
</template>

<style lang="less" scoped>
.not-found {
	width: 100%;
	height: 100%;
	min-height: 100vh;
	background-color: #3498db;
	display: flex;
	justify-content: center;
	align-items: center;
	.box {
		width: 80%;
		height: 80%;
		position: relative;
		.face {
			position: absolute;
			top: 10%;
			left: 5%;
			width: 200px;
			height: 200px;
			border-radius: 50%;
			border: 8px solid #fff;
			clip: rect(0px, 80px, 200px, 0px);
			transform: rotate(180deg);
			&::before,
			&::after {
				position: absolute;
				content: "";
				width: 20px;
				height: 20px;
				background-color: #fff;
				border-radius: 50%;
			}
			&::before {
				top: 30%;
				left: 20%;
			}
			&::after {
				top: 60%;
				left: 20%;
			}
		}

		.info {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			font-size: 6rem;
			span {
				user-select: none;
				font-weight: bold;
				color: #fff;
				display: inline-block;
				margin: 1rem;
			}
		}

        .go-home{
            position: absolute;
            top: 80%;
			left: 50%;
			transform: translate(-50%, -50%);
            text-decoration: none;
            color: #fff;
        }

	}
}
</style>
